<template>
  <div class="pageBox">
    <head-component title="商品列表"></head-component>

    <van-tabs v-model:active="active" @change="change" :ellipsis="false" v-if="tabs.length">
      <van-tab
        :title="item.name"
        :name="item.id"
        v-for="item in tabs"
        :key="item.id"
      >
      </van-tab>
    </van-tabs>

    <div class="content">
      <div class="exchangeBox">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <div class="goodsList flex-between">
            <div
              class="goodsItem"
              v-for="item in list"
              :key="item.id"
              @click="goGoodsDetails(item)"
            >
              <img class="goodsIcon" :src="item.thumbUrl" alt="" />
              <div class="goodsTitle oneHidden">{{ item.title }}</div>
              <div class="goodsPrice flex-row">
                <p>¥{{ item.marketprice }}</p>
                <del>¥{{ item.productprice }}</del>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, onMounted, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const cateId = ref("");
    const kind = ref("");  //  首页分类跳转专用
    const active = ref("");
    const tabs = ref([]); // 分类数据

    const page = ref(1);
    const lastId = ref(0);
    const list = ref([]);
    const loading = ref(true);
    const finished = ref(true);

    function change(name) {
      console.log(name, active.value);
      refresh();
    }

    function getTabs() {
      post("/portal/Shop", {
        module: "Goods",
        interface: kind.value == "more" ? "1000" : "2000",
        data: {
          lastId: lastId.value,
          page: page.value,
          sort: "",
          cateId: cateId.value,
          genre: "",
          isrecommand: "",
          keyword: "",
        },
      }).then((res) => {
        tabs.value = res.data.cateList;
        active.value = res.data.cateList.length ? res.data.cateList[0].id : "";
        refresh();
      });
    }

    function refresh() {
      page.value = 1;
      lastId.value = 0;
      list.value = [];
      loading.value = true;
      finished.value = false;
      onLoad();
    }

    function onLoad() {
      post("/portal/Shop", {
        module: "Goods",
        interface:  kind.value == "more" ? "1000" : "2000",
        data: {
          lastId: lastId.value,
          page: page.value,
          sort: "",
          cateId: tabs.value.length ? active.value : cateId.value,
          genre: "",
          isrecommand: "",
          keyword: "",
        },
      }).then((res) => {
        let datas = res.data.list;
        if (datas) {
          list.value = list.value.concat(datas);
          console.log(list.value);
          loading.value = false;
        }
        lastId.value = res.data.lastId;
        page.value = res.data.currentPage + 1;
        if (page.value > res.data.lastPage) {
          loading.value = false;
          finished.value = true;
        }
      });
    }
    function goGoodsDetails(param) {
      router.push({
        path: "/goodsDetails",
        query: {
          id: param.id,
        },
      });
    }

    onMounted(() => {
      cateId.value = router.currentRoute.value.query.cateId
        ? router.currentRoute.value.query.cateId
        : "";
      kind.value = router.currentRoute.value.query.kind ? router.currentRoute.value.query.kind : "";
      getTabs();
    });

    return {
      kind,
      cateId,
      tabs,
      page,
      lastId,
      list,
      loading,
      finished,
      active,
      onLoad,
      goGoodsDetails,
      change,
      refresh,
      getTabs,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;

  .content {
    padding: 0 30px;
    .exchangeBox {
      margin-top: 25px;
      .goodsList {
        flex-wrap: wrap;
        justify-content: flex-start;
        .goodsItem {
          width: 48%;
          border-radius: 16px;
          background: #ffffff;
          padding-bottom: 16px;
          position: relative;
          margin: 0 6px 20px;
          .goodsIcon {
            width: 100%;
            height: 260px;
            border-radius: 12px 12px 0px 0px;
          }
          .hot {
            width: 64px;
            height: 30px;
            position: absolute;
            left: 0;
            top: 140px;
            z-index: 1;
          }
          .goodsTitle {
            font-size: 28px;
            font-weight: 500;
            color: #333333;
            padding: 10px 0 0 12px;
            width: 100%;
          }
          .goodsPrice {
            padding: 9px 0 0 12px;
            align-items: flex-end;
            p {
              font-size: 36px;
              font-weight: 500;
              color: #e00b12;
            }
            del {
              font-size: 22px;
              font-weight: 400;
              color: #b3b3b3;
              padding-bottom: 4px;
            }
          }
        }
      }
    }
  }
}
</style>